<template>
    <div>
        <el-container>
            <el-header class="homeHeader">
                <el-link href="/#/"
                ><p class="title">Vue&Cesium</p></el-link
                >
            </el-header>
            <el-container class="homeContainer">
                <el-scrollbar style="height: calc(100vh - 80px);width: 370px;">
                        <el-aside class="homeAside">
                            <el-menu
                                    class="el-menu-vertical-demo"
                                    router
                            >
                                <el-menu-item index="about">关于</el-menu-item>
                                <el-submenu index="1">
                                    <template slot="title">
                                        <span>基础</span>
                                    </template>
                                    <el-menu-item-group>
                                        <el-menu-item index="viewer">viewer</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="2">
                                    <template slot="title">相机</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="setView">SetView</el-menu-item>
                                        <el-menu-item index="flyTo">flyTo</el-menu-item>
                                        <el-menu-item index="CameraCircumferentialFlight">绕点圆周飞行</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="3">
                                    <template slot="title">影像</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="CesiumIonAssetsImageryProviderExample">
                                            cesiumIonAssets提供影像
                                        </el-menu-item>
                                        <el-menu-item index="ArcGisMapServerImageryProvider">
                                            ArcGisMapServerImageryProvider
                                        </el-menu-item>
                                        <el-menu-item index="OpenStreetMapImageryProvider">
                                            OpenStreetMapImageryProvider
                                        </el-menu-item>
                                        <el-menu-item index="UrlTemplateImageryProvider">
                                            UrlTemplateImageryProvider(高德影像)
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="4">
                                    <template slot="title">Entity实体</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="EntityBox">Box框</el-menu-item>
                                        <el-menu-item index="EntityBillboardLocationMark">Billboard广告牌</el-menu-item>
                                        <el-menu-item index="EntityMove">移动Entity</el-menu-item>
                                        <el-menu-item index="ViewScreen">视屏(Entity-Wall)</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="5">
                                    <template slot="title">Primitive图元</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="PrimitivesAppearanceMaterialWithImage">Primitive填充材质使用图片
                                        </el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="6">
                                    <template slot="title">标绘</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="addBillboardLocationMarks">添加Billboard标记</el-menu-item>
                                        <el-menu-item index="PlotPointsExample">画点</el-menu-item>
                                        <el-menu-item index="PlotLinesExample">画线</el-menu-item>
                                        <el-menu-item index="PlotPolygonsExample">画多边形面</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="7">
                                    <template slot="title">动画效果</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="FlashingEntity">Entity闪烁</el-menu-item>
                                        <el-menu-item index="RadarScan">雷达扫描</el-menu-item>
                                        <el-menu-item index="CircleRipple">单圆扫描</el-menu-item>
                                        <el-menu-item index="DoubleCircleRipple">双圆涟漪</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="8">
                                    <template slot="title">模型和数据</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="3dTilesNewYorkCity3dBuildings">3dTiles</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="9">
                                    <template slot="title">自定义范例</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="customInfoBoxExample">自定义POI气泡窗口</el-menu-item>
                                        <el-menu-item index="imageLayerSplitExample">图层分屏</el-menu-item>
                                        <el-menu-item index="abcControllerExample">图层透明度，亮度，对比度</el-menu-item>
                                        <el-menu-item index="MeasuringScaleExample">比例尺</el-menu-item>
                                        <el-menu-item index="MouseFocusCoordinateExample">鼠标坐标</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="10">
                                    <template slot="title">范例二</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="GlobeInterior">地球内部（官网样例GlobeInterior）</el-menu-item>
                                        <el-menu-item index="ParticleSystemWeather">粒子效果-天气（官网样例）</el-menu-item>
                                        <el-menu-item index="ParticleSystem">粒子系统（官网样例）</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="11">
                                    <template slot="title">结合高德API的搜素功能</template>
                                    <el-menu-item-group>
                                        <el-menu-item index="gaodeSearchExample">高德搜索(行政区搜索)</el-menu-item>
                                        <el-menu-item index="gaodePoiSearchExample">高德搜索(POI搜索)</el-menu-item>
                                    </el-menu-item-group>
                                </el-submenu>
                                <el-submenu index="12" disabled>
                                    <template slot="title">====单身能大大提高工作效率====</template>
                                </el-submenu>
                            </el-menu>
                        </el-aside>
                </el-scrollbar>
                <el-main class="contentMain">
                    <about v-if="this.$router.currentRoute.path === '/'"></about>
                    <router-view/>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    // @ is an alias to /src
    import About from "./About";
    import {Scrollbar} from "element-ui"
    export default {
        name: 'Home',
        components: {
            About,
            [Scrollbar.name]:Scrollbar
        },
        data() {
            return {}
        }
    }
</script>
<style scoped>
    .homeHeader {
        background-color: rgba(255, 255, 255, 0.6);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 15px;
        box-sizing: border-box;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
        margin: 5px 0 10px 0;
    }

    .homeHeader .title {
        font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB",
        "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
        font-size: 25px;
        font-weight: bold;
        color: rgb(95, 158, 160);
    }
    .homeAside {
        min-height: calc(100vh - 80px);
        margin-top: 6px;
        background-color: rgba(255, 255, 255, 0.6);
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        text-align: left;
    }

    .contentMain {
        width: 100%;
        min-height: 200px;
        height: calc(100vh - 10px - 70px);
        padding: 10px;
        overflow-y: auto;
    }

</style>
<style>
    .el-scrollbar .el-scrollbar__wrap{
        overflow-x : hidden ;
    }
</style>
